import {
    logger
} from '@/utils/util'
Component({
    properties: {
        // 外部传入的心电图数据数组
        ecgData: {
            type: Array,
            value: [], // 默认空数据
            observer(newVal) {
                this.updateEcgData(newVal); // 数据变化时更新队列并重绘
            },
        },
        lineColor: {
            type: String,
            value: ''
        }
    },

    data: {
        canvas: null,
        ctx: null,
        canvasWidth: 0,
        canvasHeight: 300, // 画布高度
        baselineY: 150, // 基线 Y 坐标
        amplitude: 35, // 振幅（波峰高度参数）
        pointInterval: 5, // 每点的水平间距
        maxPoints: 0, // 最大点数数量
        ecgQueue: [], // 内部数据队列，用于绘制心电图
    },

    lifetimes: {
        attached() {
            const systemInfo = wx.getSystemInfoSync();
            const canvasWidth = systemInfo.windowWidth;
            const maxPoints = Math.floor(canvasWidth / this.data.pointInterval);

            this.setData({
                canvasWidth,
                maxPoints,
                ecgQueue: new Array(maxPoints).fill(0), // 初始化队列，有固定点数
            });

            this.initCanvas();
        },

        detached() {
            if (this.data.canvas && this.data.animationId) {
                this.data.canvas.cancelAnimationFrame(this.data.animationId); // 停止动画
            }
        },
    },

    methods: {
        findLastPositiveNumber(arr) {
            if (!Array.isArray(arr)) {
                throw new Error('输入必须是一个数组');
            }

            // 从数组的末尾开始遍历，找到第一个大于 0 的数
            for (let i = arr.length - 1; i >= 0; i--) {
                if (typeof arr[i] === 'number' && arr[i] > 0) {
                    return arr[i]; // 返回找到的数
                }
            }

            // 如果没有大于 0 的数，返回 null 或自定义提示
            return 0;
        },
        // 初始化 Canvas
        initCanvas() {
            const query = this.createSelectorQuery();
            query
                .select('#ecgCanvas')
                .fields({
                    node: true,
                    size: true
                })
                .exec((res) => {
                    if (!res[0] || !res[0].node) {
                        logger.error('Canvas 节点未找到！');
                        return;
                    }

                    const canvas = res[0].node;
                    const ctx = canvas.getContext('2d');
                    const dpr = wx.getSystemInfoSync().pixelRatio;

                    canvas.width = res[0].width * dpr;
                    canvas.height = res[0].height * dpr;
                    ctx.scale(dpr, dpr);

                    this.setData({
                        canvas,
                        ctx
                    });

                    this.drawFrame(); // 启动绘制
                });
        },

        // 处理传入的数据更新队列
        updateEcgData(newData) {
            const {
                ecgQueue,
                maxPoints
            } = this.data;

            // 更新队列：追加新数据到末尾，保持长度固定
            ecgQueue.push(...newData);
            while (ecgQueue.length > maxPoints) {
                ecgQueue.shift(); // 删除超出长度的数据
            }
            this.setData({
                ecgQueue,
                lastNum: this.findLastPositiveNumber(ecgQueue)
            }); // 更新组件内部队列
        },

        // 绘制心电图
        drawFrame() {
            const {
                ctx,
                canvasWidth,
                canvasHeight,
                ecgQueue,
                baselineY,
                amplitude,
                pointInterval,
                lineColor
            } = this.data;

            if (!ctx) {
                logger.error('绘图上下文未初始化！');
                return;
            }

            // 清空画布
            ctx.clearRect(0, 0, canvasWidth, canvasHeight);

            // 绘制心电图
            ctx.beginPath();
            ecgQueue.forEach((value, index) => {
                const x = index * pointInterval;
                const y = value === 0 ?
                    baselineY // 数据为 0 时绘制基线
                    :
                    baselineY - (value / 20) * amplitude; // 非零数据绘制波峰

                if (index === 0) {
                    ctx.moveTo(x, y);
                } else {
                    ctx.lineTo(x, y);
                }
            });
            // 绘制连线
            ctx.strokeStyle = lineColor == 'heartrate' ? '#179BD5' : '#C40A04';
            ctx.lineWidth = 2;
            ctx.stroke();

            // 绘制基线
            ctx.beginPath();
            ctx.strokeStyle = 'transparent';
            ctx.lineWidth = 1;
            ctx.moveTo(0, baselineY);
            ctx.lineTo(canvasWidth, baselineY);
            ctx.stroke();

            // 请求下一帧
            const animationId = this.data.canvas.requestAnimationFrame(this.drawFrame.bind(this));
            this.setData({
                animationId
            });
        },
    },
});